<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-20 09:51:20
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-22 22:50:59
 * @FilePath: \shangyitong\src\pages\hospital\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="hospital">
		<div class="menu">
			<div class="top">
				<el-icon><HomeFilled /></el-icon>
				<span>/ 医院信息</span>
			</div>
			<el-menu
				:router="true"
				:default-active="$route.path"
				class="el-menu-vertical-demo"
			>
				<el-menu-item
					index="/hospital/register"
					@click="changeActive('/hospital/register')"
				>
					<el-icon><icon-menu /></el-icon>
					<span>预约挂号</span>
				</el-menu-item>
				<el-menu-item
					index="/hospital/detail"
					@click="changeActive('/hospital/detail')"
				>
					<el-icon><document /></el-icon>
					<span>医院详情</span>
				</el-menu-item>
				<el-menu-item
					index="/hospital/notice"
					@click="changeActive('/hospital/notice')"
				>
					<el-icon><setting /></el-icon>
					<span>预约通知</span>
				</el-menu-item>
				<el-menu-item
					index="/hospital/close"
					@click="changeActive('/hospital/close')"
				>
					<el-icon><InfoFilled /></el-icon>
					<span>停诊信息</span>
				</el-menu-item>
				<el-menu-item
					index="/hospital/search"
					@click="changeActive('/hospital/search')"
				>
					<el-icon><Search /></el-icon>
					<span>查询/取消</span>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="contant">
			<!-- 子组件展示结构 -->
			<router-view></router-view>
		</div>
	</div>
</template>

<script setup lang="ts">
//左侧菜单需要用到的图标
import {
	Document,
	Menu as IconMenu,
	InfoFilled,
	Search,
	Setting,
	HomeFilled,
} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import useDetailStore from '@/store/modules/hospitalDetail'
import { useRouter, useRoute } from 'vue-router'
let detailStore = useDetailStore()
let $router = useRouter()
//获取当前是路由信息
let $route = useRoute()
let hosCode = ref<string | null>(null) // 修改为可空类型
onMounted(() => {
	// 类型断言并检查非空
	hosCode.value = ($route.query.hoscode as string) || ''
    //获取医院详情数据
	detailStore.getHospital(hosCode.value);
    //获取医院科室数据
    detailStore.getDeparment(hosCode.value);
})
//点击事件的回调
const changeActive = (path: string) => {
	$router.push({
		path,
        query:{
            hoscode:hosCode.value 
        }
	})
}
</script>

<style lang="scss" scoped>
.hospital {
    margin: 10px 0 0 0;
	display: flex;
	.menu {
		flex: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.top {
			color: #7f7f7f;
		}
	}
	.contant {
		flex: 8;
	}
}
</style>
